import { useState } from "react";

export default function App() {
    const [user, setUser] = useState({ name: "Alice" });
    const [a, setA] = useState([{ name: "Alice", age: 20 }]);
    const [isState, setIsState] = useState(true);

    //修改对象（直接修改无法更新视图）
    const updateUser = () => {
        setUser({ ...user, name: "Job" });
    };

    //修改布尔值
    const updateState = () => {
        setIsState(false);
    };

    //修改数组
    const updateObj = () => {
        setA([...a, { name: "job", age: 10 }]);
    };

    return (
        <div>
            <button onClick={updateUser}>obj: {user.name}</button>
            <button onClick={updateState}>state: {isState.toString()}</button>
            <button onClick={updateObj}>array: {a.toString()}</button>
        </div>
    );
}